<template>
  <div class="funcbar">
    <template v-for="item in btns" :key="item.key">
      <el-badge :value="item.badge">
        <div
          :class="{ item: true, selected: item.selected }"
          @click="onClick(item.key)"
        >
          <div class="icon">
            <img :src="getImageUrl(item.icon)" />
          </div>
          <div class="label">{{ item.label }}</div>
        </div>
      </el-badge>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  /**
   * [{key: "engineering",label: "修复工程",icon:"icon-engineering.svg"}]
   */
  actions: {
    type: Array,
    default: () => [],
  },
});
let actions = props.actions.map((item) => ({ ...item, selected: false }));
const btns = ref(actions);

const getImageUrl = (name) => {
  return new URL(`/src/assets/icon/${name}`, import.meta.url).href;
};
// const emits=
const emits = defineEmits(["change"]);
const onClick = (key) => {
  btns.value = btns.value.map((item) => ({
    ...item,
    selected: item.key === key,
  }));
  emits("change", key);
};

const reset = () => {
  btns.value = btns.value.map((item) => ({
    ...item,
    selected: false,
  }));
  emits("change", null);
};

defineExpose({
  reset,
});
</script>

<style lang="scss" scoped>
.funcbar {
  display: flex;
  gap: 16px;
  pointer-events: all;
  align-items: center;
  .item {
    // width: 64px;
    user-select: none;
    color: #fff;
    background-color: rgba(2, 57, 45, 0.65);
    // border: 1px solid var(--el-border-color);
    box-shadow: 0 0 0 1px var(--el-border-color) inset;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 6px;
    .icon {
      text-align: center;
      img {
        height: 22px;
        width: 22px;
      }
    }
    .label {
      text-align: center;
      font-size: 12px;
    }

    &:hover {
      cursor: pointer;
      background-color: rgba(3, 84, 66, 0.85);
    }
    &:active {
      scale: 0.98;
      background-color: rgba(3, 84, 66, 0.95);
    }

    &.selected {
      background-color: rgb(6 159 125 / 50%);
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 2px;
        background-color: #ffd98c;
        border-radius: 2px;
      }
    }
  }
}
</style>
